<template>
    <basic-container :btnFlag=true>
        <div class="card-border">
<!--            <process-view-simple-planning-register :active="1" />-->
            <card-header :header-data="headerData"/>
            <activiti-action ref="action"
                             :task-id="taskId"
                             @confirm="submitConfirm"
                             v-model="form">
                <template slot="formHeader">
                    <el-form ref="form"
                             v-if="form.action == 'assign'"
                             label-position="left"
                             label-width="100px"
                             :model="form"
                             :rules="formRules">
                        <el-form-item label="交办用户"
                                      prop="doCandidateUserIds">
                            <el-col :span="8">
                                <el-input v-model="userNames"
                                          :readonly="true" />
                            </el-col>
                            <el-col :span="4"
                                    :offset="1">
                                <el-button type="primary"
                                           @click="showUserSelect">选择用户</el-button>
                            </el-col>
                        </el-form-item>
                    </el-form>
                </template>
            </activiti-action>
            <dept-user-select :visible="deptUserSelectVisible"
                              @afterSelect="confirmUserSelect"
                              @cancel="cancelUserSelect"/>
            <el-tabs class="bs-tab" v-model="activeName"
                     type="card">
                <el-tab-pane v-if="registerinfoId != null" label="申请信息"
                             name="first">
                    <register-detail class="register-detail"
                                     :id="registerinfoId"/>
                </el-tab-pane>
                <el-tab-pane v-if="listId != null" label="报批信息"
                             name="first">
                    <bostech-detail v-if="listDetail != null && listDetail.length > 0" :detail-data="listDetail"/>
                    <list-register-info v-if="listId != null" :listId="listId"/>
                </el-tab-pane>
                <el-tab-pane label="办理过程"
                             name="second">
                    <process-handle-history :task-id="taskId"/>
                </el-tab-pane>
            </el-tabs>
        </div>
    </basic-container>
</template>

<script>
    import processViewSimplePlanningRegister from '@/components/activiti/process-view/simple/planning-register'
    import activitiAction from "@/components/activiti/action"
    import registerDetail from "@/components/registerinfo/registerDetail"
    import { taskComplete } from "@/api/activiti/monitor";
    import processHandleHistory from "@/components/activiti/history/processHandleHistory";
    import {getbasisinfo} from "@/api/planning/detailList";
    import listRegisterInfo from "@/components/list/listRegisterInfo"

    export default {
        name: "jointlyHandleAssign",
        components: {
            processViewSimplePlanningRegister,
            activitiAction,
            registerDetail,
            processHandleHistory,
            listRegisterInfo
        },
        data () {
            return {
                headerData: {
                    title: "会办交办"
                },
                activeName: 'first',
                taskId: null,
                registerinfoId: null,
                listId: null,
                listDetail: [],
                userNames: null,
                form: {
                    doCandidateUserIds: null
                },
                formRules: {
                    doCandidateUserIds: [
                        { required: true, message: '请选择交办用户' },
                    ]
                },
                deptUserSelectVisible: false
            }
        },
        created () {
            this.init();
        },
        methods: {
            init(){
                this.taskId = this.$route.params.taskId;
                this.registerinfoId = this.$route.query.registerinfoId;
                this.listId = this.$route.query.listId;
                if (this.listId != null) {
                    this.getList();
                }
            },
            getList() {
                getbasisinfo(this.listId).then((res) => {
                    this.list = res.data.data;
                    let list = this.list;
                    if(list != null){
                        this.listDetail = [
                            {label: '清单标题', value: list.title },
                            {label: '清单说明', value: list.description}
                        ]
                    }
                });
            },
            goBack () {
                this.$router.go(-1);
            },
            submitConfirm(validActionForm, stopLoading, closeDialog) {
                validActionForm((actionFormValid, object) => {
                    this.validateForm((valid) => {
                        if (valid && actionFormValid) {
                            let params = this.form;
                            taskComplete(this.taskId, params).then(response => {
                                if (response.data.code == 0) {
                                    this.$notify({
                                        title: '成功',
                                        message: '提交成功',
                                        type: 'success',
                                        duration: 2000
                                    });
                                    closeDialog();
                                    this.goBack();
                                }
                            }).finally(() => {
                                stopLoading();
                            });
                        } else {
                            this.formValidateErrorNotify();
                            stopLoading();
                        }
                    })
                });
            },
            formValidateErrorNotify () {
                this.$notify({
                    title: '错误',
                    message: '表单存在错误，请按提示修改',
                    type: 'error',
                    duration: 2000
                });
            },
            validateForm (callback) {
                if (this.$refs.form != null) {
                    this.$refs.form.validate((valid, object) => {
                        callback(valid, object);
                    });
                } else {
                    if (callback != null) {
                        callback(true);
                    }
                }
            },
            showUserSelect () {
                this.deptUserSelectVisible = true;
            },
            confirmUserSelect (userIds, userNames) {
                let userIdStr = null;
                if (userIds != null && Array.isArray(userIds) && userIds.length > 0) {
                    userIdStr = userIds.join(',');
                }
                this.form.doCandidateUserIds = userIdStr;

                let userNameStr = null;
                if (userNames != null && Array.isArray(userNames) && userNames.length > 0) {
                    userNameStr = userNames.join(',');
                }
                this.userNames = userNameStr;
                this.deptUserSelectVisible = false;
            },
            cancelUserSelect () {
                this.deptUserSelectVisible = false;
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>
